<template>
  <div class="wrapper">
    <div class="box">
      <div class="la-ball-beat">
        <div v-for="(item, index) in data1" :key="index"></div>
        <!-- https://www.jq22.com/demo/jquery-loading20151019/ -->
      </div>
    </div>
    <div class="box">
      <div class="la-ball-atom">
        <div
          v-for="(item, index) in data2"
          :key="index"
          :class="'box' + index"
        ></div>
      </div>
    </div>
    <div class="box">
      <div class="la-ball-climbing-dot">
        <div
          v-for="(item, index) in data3"
          :key="index"
          :class="'box' + index"
        ></div>
      </div>
    </div>
    <div class="box">
      <div class="la-pacman">
        <div
          v-for="(item, index) in data4"
          :key="index"
          :class="'box' + index"
        ></div>
      </div>
    </div>
    <div class="box">
      <div class="la-timer">
        <div
          v-for="(item, index) in data5"
          :key="index"
          :class="'box' + index"
        ></div>
      </div>
    </div>
    <div class="box">
      <div class="la-square-jelly-box">
        <div
          v-for="(item, index) in data6"
          :key="index"
          :class="'box' + index"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import "../../assets/scss/loading.css";
import "../../assets/css/load-awesome/ball-climbing-dot.css";
import "../../assets/css/load-awesome/pacman.css";
import "../../assets/css/load-awesome/timer.css";
import "../../assets/css/load-awesome/square-jelly-box.css";
export default {
  components: {},
  props: {},
  data() {
    return {
      data1: [1, 2, 3],
      data2: [1, 2, 3, 4],
      data3: [1, 2, 3, 4],
      data4: [1, 2, 3, 4, 5, 6],
      data5: [1],
      data6: [1, 2],
      value: 300,
    };
  },
  created() {},
  mounted() {},
  activated() {},
  updated() {},
  methods: {},
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
// 变量
// 颜色
$currentColor: #fff;
// 父级
$widthF: 140px;
$heightF: 50px;
// 子级
$widthS: 20px;
$heightS: 20px;
$animate: ball-beat;

// 混入
@mixin size {
  width: 100%;
  height: 100%;
}

// 函数
@function fn($data) {
  @return $data/10 + px;
}

.wrapper {
  @include size;
  background: rgb(152, 191, 246);
  margin: 20px;
  padding: fn(300);
  display: flex;
  .box {
    flex: 1;
    border: 2px solid olivedrab;
    padding: 50px;
    margin: 0 20px;
    // 动画1
    .la-ball-beat {
      position: relative;
      display: block;
      font-size: 0;
      width: $widthF;
      height: $heightF;
      & > div {
        width: $widthS;
        height: $heightS;
        margin: 4px;
        background-color: $currentColor;
        border: 0 solid $currentColor;
        border-radius: 100%;
        position: relative;
        display: inline-block;
        float: none;
        animation: $animate 0.7s -0.15s infinite linear;
      }
      & > div:nth-child(2n-1) {
        animation-delay: -0.5s;
      }
    }
  }
}

// 动画1
@-webkit-keyframes #{$animate} {
  50% {
    opacity: 0.2;
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    transform: scale(1.2);
  }
}
</style>
